<template>
  <div>
    <el-button type="danger" @click="batchDel">批量删除</el-button>
    <el-tree :data="data" :props="defaultProps"
             ref="categoryTree"
             @node-click="handleNodeClick"
             show-checkbox
             :default-expanded-keys="expandedKey"
             node-key="id"
             :expand-on-click-node="false">
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <= 2"
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            Edit
          </el-button>
          <el-button
            v-if="node.childNodes.length == 0"
            type="fail"
            style="color: red"
            size="mini"
            @click="() => del(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog title="" :visible.sync="dialogVisible" width="30%">
      <h1>{{ dialogType }}</h1>
      <!--    <el-dialog title={{dialogType}} :visible.sync="dialogVisible">-->
      <el-form :model="category">
        <el-form-item label="类别名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="category.proUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogType: "",
      data: [],
      dialogVisible: false,
      category: {
        id: null,
        name: "",
        parentId: 0,
        catLevel: 0,
        isShow: 1,
        sort: 0,
        icon: "",
        proUnit: "",
        proCount: 0
      },
      expandedKey: [],
      defaultProps: {
        children: 'childrenCategories',
        label: 'name'
      }
    };
  },
  methods: {

    addOrUpdate() {
      if (this.dialogType == "添加类别") {
        this.addCategory()
      }
      if (this.dialogType == "修改类别") {
        this.updateCategory()
      }
    },
    updateCategory() {
      var {id, name, icon, proUnit} = this.category
      this.$http({
        // url: `http://localhost:9090/commodity/category/update`,
        url: this.$http.adornUrl('/commodity/category/update'),
        method: 'post',
        data: this.$http.adornData({id, name, icon, proUnit}, false)
      }).then(({data}) => {
        this.$message({
          message: '修改成功',
          type: 'success',
        })
        this.dialogVisible = false
        this.getCategories()
        this.expandedKey = [this.category.parentId]
      })
    },
    edit(data) {
      this.dialogType = "修改类别"
      this.dialogVisible = true
      this.$http({
        // url: `http://localhost:9090/commodity/category/info/${data.id}`,
        url: this.$http.adornUrl(`/commodity/category/info${data.id}`),
        method: 'get',
      }).then(({data}) => {
        this.category.id = data.category.id
        this.category.name = data.category.name
        this.category.parentId = data.category.parentId
        this.category.icon = data.category.icon
        this.category.proUnit = data.category.proUnit
      })
    },
    addCategory() {
      this.$http({
        // url: 'http://localhost:9090/commodity/category/save',
        url: this.$http.adornUrl('/commodity/category/save'),
        method: 'post',
        data: this.$http.adornData(this.category, false)
      }).then(({data}) => {
        this.$message({
          message: '添加成功',
          type: 'success',
        })
        this.dialogVisible = false
        this.getCategories()
        this.expandedKey = [this.category.parentId]
      })
    },
    append(data) {
      this.dialogType = "添加类别"
      this.dialogVisible = true
      this.category.id = null
      this.category.name = ""
      this.category.parentId = data.id
      this.category.catLevel = data.catLevel * 1 + 1
      this.category.isShow = 1
      this.category.sort = 0
      this.category.icon = ""
      this.category.proUnit = ""
      this.category.proCount = 0

    },
    del(node, data) {
      var ids = [data.id]

      this.$confirm(`确定对类别[${data.name}]进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          // url: 'http://localhost:9090/commodity/category/delete',
          url: this.$http.adornUrl('/commodity/category/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {

          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getCategories()
          this.expandedKey = [node.parent.data.id]
        })
      })
    },
    batchDel() {
      var checkedNodes = this.$refs.categoryTree.getCheckedNodes()
      var ids = []
      var categoryNames = []
      for (var i = 0; i < checkedNodes.length; i++) {
        ids.push(checkedNodes[i].id)
        categoryNames.push(checkedNodes[i].name)
      }
      this.$confirm(`确定对类别[${categoryNames}]进行批量删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          // url: 'http://localhost:9090/commodity/category/delete',
          url: this.$http.adornUrl('/commodity/category/delete'),

          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {

          this.$message({
            message: '批量删除成功',
            type: 'success',
          })
          this.getCategories()
        })
      })
    },
    getCategories() {
      this.$http({
        url: this.$http.adornUrl('/commodity/category/list/tree'),
        method: 'get'
      }).then(({data}) => {
        this.data = data.data
      })
    },
  },
  created() {
    this.getCategories()
  }
}
</script>
<style scoped>

</style>
